<!DOCTYPE html>

<link rel="stylesheet" href="../../../styles.css" />

<style>
  #y {
    position: absolute;
    width: 2px;
    height: 400px;
    left: 249.5px;
    background-color: red;
  }

  #x {
    position: absolute;
    height: 2px;
    width: 500px;
    top: 149.5px;
    background-color: red;
  }
</style>

<div id="clip">
  <div id="y"></div>
  <div id="x"></div>
  <div id="floating">Float</div>
</div>

<script type="module">
  import {computePosition, autoPlacement} from '../../../dist/index.mjs';
  import {position} from '../../../utils.mjs';

  function gbcl({x = 0, y = 0}) {
    return {width: 0, height: 0, left: x, right: x, top: y, bottom: y};
  }

  const ref = {
    getBoundingClientRect: () => gbcl(),
  };

  const update = () => {
    computePosition(ref, floating, {
      middleware: [autoPlacement({allowedPlacements: ['top', 'bottom']})],
    }).then(position);
  };

  document.addEventListener('mousemove', ({clientX, clientY}) => {
    ref.getBoundingClientRect = () => gbcl({x: clientX, y: clientY});
    update();
  });
</script>
